<template>
  <div style="height:100%">
    <div class="q-pa-md" style="background-color: white">
      <q-breadcrumbs>
        <template v-slot:separator>
          <q-icon size="1.5em" name="chevron_right" color="primary" />
        </template>
        <q-breadcrumbs-el label="个人中心" icon="fas fa-user" to="/user" />
        <q-breadcrumbs-el
          label="设置"
          icon="eva-settings-2-outline"
          class="text-blue"
        />
      </q-breadcrumbs>
    </div>
      <div
        v-if="isload"
        class="row items-center justify-center"
        style="height: 100%"
      >
        <div class="text-gray column items-center">
          <q-spinner-hourglass color="primary" size="4em" />
          <div>数据加载中 <q-spinner-dots color="grey" size="2.5em" /></div>
        </div>
      </div>
    <div v-else class="scroll" style="height:100%;padding-bottom:60px">
    <div class="q-mt-sm q-pb-md q-pa-sm" style="background-color: white">
      <q-list class="rounded-borders">
        <q-item-label header>基本信息</q-item-label>

        <q-item class="q-pb-none" clickable v-ripple @click="handlechange(0)">
          <q-item-section>
            <q-item-label>生日</q-item-label>
            <q-item-label caption>{{ infolist["birthday"] }}</q-item-label>
          </q-item-section>

          <q-item-section side>
            <q-icon name="mdi-chevron-right" />
          </q-item-section>
        </q-item>
        <div class="q-px-md">
          <q-separator spaced />
        </div>
        <q-item class="q-pb-none" clickable v-ripple @click="handlechange(1)">
          <q-item-section>
            <q-item-label>支付宝账号</q-item-label>
            <q-item-label caption>{{ infolist["alipayid"] }}</q-item-label>
          </q-item-section>

          <q-item-section side>
            <q-icon name="mdi-chevron-right" />
          </q-item-section>
        </q-item>
        <div class="q-px-md">
          <q-separator spaced />
        </div>
        <q-item class="q-pb-none" clickable v-ripple @click="handlechange(2)">
          <q-item-section>
            <q-item-label>邮箱</q-item-label>
            <q-item-label caption>{{ infolist["email"] }}</q-item-label>
          </q-item-section>

          <q-item-section side>
            <q-icon name="mdi-chevron-right" />
          </q-item-section>
        </q-item>
        <div class="q-px-md">
          <q-separator spaced />
        </div>
        <q-item class="q-pb-none" clickable v-ripple @click="handlechange(3)">
          <q-item-section>
            <q-item-label>身份证号</q-item-label>
            <q-item-label caption>{{ infolist["idnumber"] }}</q-item-label>
          </q-item-section>

          <q-item-section side>
            <q-icon name="mdi-chevron-right" />
          </q-item-section>
        </q-item>
        <div class="q-px-md">
          <q-separator spaced />
        </div>
        <q-item class="q-pb-none" clickable v-ripple @click="handlechange(4)">
          <q-item-section>
            <q-item-label>银行卡号</q-item-label>
            <q-item-label caption>{{ infolist["newbankcard"] }}</q-item-label>
          </q-item-section>

          <q-item-section side>
            <q-icon name="mdi-chevron-right" />
          </q-item-section>
        </q-item>
        <div class="q-px-md">
          <q-separator spaced />
        </div>
      </q-list>
    </div>
    <div class="q-mt-sm q-pb-md q-pa-sm" style="background-color: white">
      <q-list class="rounded-borders">
        <q-item-label header>其他信息</q-item-label>

        <q-item class="q-pb-none" clickable v-ripple @click="handlechange(5)">
          <q-item-section>
            <q-item-label>学校</q-item-label>
            <q-item-label caption>{{ infolist["school"] }}</q-item-label>
          </q-item-section>

          <q-item-section side>
            <q-icon name="mdi-chevron-right" />
          </q-item-section>
        </q-item>
        <div class="q-px-md">
          <q-separator spaced />
        </div>
        <q-item class="q-pb-none" clickable v-ripple @click="handlechange(6)">
          <q-item-section>
            <q-item-label>专业</q-item-label>
            <q-item-label caption>{{ infolist.major }}</q-item-label>
          </q-item-section>

          <q-item-section side>
            <q-icon name="mdi-chevron-right" />
          </q-item-section>
        </q-item>
        <div class="q-px-md">
          <q-separator spaced />
        </div>
        <q-item class="q-pb-none" clickable v-ripple @click="handlechange(7)">
          <q-item-section>
            <q-item-label>学号</q-item-label>
            <q-item-label caption>{{ infolist.studentid }}</q-item-label>
          </q-item-section>

          <q-item-section side>
            <q-icon name="mdi-chevron-right" />
          </q-item-section>
        </q-item>

        <div class="q-px-md">
          <q-separator spaced />
        </div>
      </q-list>
    </div>
    </div>

    <q-dialog v-model="isdialog" persistent>
      <q-card>
        <q-card-section>
          <div class="text-h6">修改{{ curlable }}</div>
        </q-card-section>
        <q-card-section class="row items-center">
          <q-input
            v-if="curkey == 'birthday'"
            filled
            v-model="curinfo"
            
           
          >
            <template v-slot:append>
              <q-icon name="event" class="cursor-pointer">
                <q-popup-proxy
                  ref="qDateProxy"
                  transition-show="scale"
                  transition-hide="scale"
                >
                  <q-date v-model="curinfo" @input="handleselect" mask="YYYY-MM-DD">
                    <div class="row items-center justify-end">
                      <q-btn v-close-popup label="关闭" color="primary" flat />
                    </div>
                  </q-date>
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
          <q-input
            v-else
            clearable
            clear-icon="close"
            filled
            color="teal-6"
            v-model="curinfo"
            :label="curlable"
          />
        </q-card-section>

        <q-card-actions align="right">
          <q-btn
            flat
            label="取消"
            color="primary"
            @click="handlecancel"
            v-close-popup
          />
          <q-btn
            flat
            label="确认修改"
            color="primary"
            @click="handleconfirm"
          
          />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>
<script>
import { getmemberdetail, updateuserselectinfo } from "assets/api/user";
export default {
  data() {
    return {
      infolist: {},
      isdialog: false,
      curlable: "",
      curkey: "",
      curinfo: "",
      isload:true
    };
  },
  created() {
    this.getuserinfo();
  },
  mounted() {},
  methods: {
    handleselect(){
      this.$refs['qDateProxy'].hide();
    },
    getuserinfo() {
      this.infolist={};
      let eid = this.$store.state.userinfo.eid;
      let reqeid = {
        eid: eid,
      };
      var vm=this;
      getmemberdetail(reqeid)
        .then((res) => {
          if(res.data.userinfo.length>0){
          let infodata = res.data.userinfo[0];
          let bankcard = infodata.bankcard;
          let str = bankcard.substring(2, bankcard.length - 4);
          infodata.newbankcard = bankcard.replace(str, "*************");
          vm.infolist = infodata;
          vm.isload=false;
          }else{
            vm.isload=false;
          }
          
        })
        .catch((err) => {
          console.log(err);
          vm.isload=false;
        });
    },
    handlechange(item) {
      if (item == 0) {
        this.isdialog = true;
        this.curlable = "生日";
        this.curkey = "birthday";
        this.curinfo = this.infolist.birthday;
      } else if (item == 1) {
        this.isdialog = true;
        this.curlable = "支付宝账号";
        this.curkey = "alipayid";
        this.curinfo = this.infolist.alipayid;
      } else if (item == 2) {
        this.isdialog = true;
        this.curlable = "邮箱";
        this.curkey = "email";
        this.curinfo = this.infolist.email;
      } else if (item == 3) {
        this.isdialog = true;
        this.curlable = "身份证号";
        this.curkey = "idnumber";
        this.curinfo = this.infolist.idnumber;
      } else if (item == 4) {
        this.isdialog = true;
        this.curlable = "银行卡号";
        this.curkey = "bankcard";
        this.curinfo = this.infolist.bankcard;
      } else if (item == 5) {
        this.isdialog = true;
        this.curlable = "学校";
        this.curkey = "school";
        this.curinfo = this.infolist.school;
      } else if (item == 6) {
        this.isdialog = true;
        this.curlable = "专业";
        this.curkey = "major";
        this.curinfo = this.infolist.major;
      } else if (item == 7) {
        this.isdialog = true;
        this.curlable = "学号";
        this.curkey = "studentid";
        this.curinfo = this.infolist.studentid;
      }
    },
    handleconfirm() {
      if (this.curkey) {
        let key = this.curkey;
        let reqdata ={};
        reqdata[key]=this.curinfo;
        updateuserselectinfo(reqdata)
          .then((res) => {
            if (res.data.code == 1) {
              this.$q.notify({
                color: "light-green-4",
                icon: "far fa-check-circle",
                position: "center",
                textColor: "white",
                message: "提交成功！",
                timeout: "1000",
              });
              this.getuserinfo();
              this.handlecancel();
            } else {
              this.$q.notify({
                color: "red-5",
                textColor: "white",
                icon: "warning",
                position: "top",
                message: "提交失败！",
                timeout: "1000",
              });
            }
          })
          .catch(() => {
            this.$q.notify({
              color: "red-5",
              textColor: "white",
              icon: "warning",
              position: "top",
              message: "提交失败！",
              timeout: "1000",
            });
          });
      } else {
        return;
      }
    },
    handlecancel() {
      this.isdialog = false;
      this.curlable = "";
      this.curkey = "";
      this.curinfo = "";
    },
  },
};
</script>